<template>
    <div>
        <!-- 面包屑导航开始想要修改组件原有样式时尽量把后来修改的样式写在全局样式里面 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图区 -->
     <el-card>
         <!-- 绑定data中的数据 -->
         <el-table :data="RightsData" border stripe>
             <!-- 显示序列号  -->
             <el-table-column type="index"></el-table-column>
              <el-table-column label="权限名称" prop="authName"></el-table-column>
              <el-table-column label="路径" prop="path"></el-table-column>
              <el-table-column label="权限等级" prop="level">
                  <template slot-scope="scope">
                    <!-- {{scope.row.level}}获取等级然后利用v-if判断决定是否渲染出来 -->
                  <el-tag v-if="scope.row.level==='0'">标签一</el-tag>
                  <el-tag type="success" v-else-if="scope.row.level==='1'">标签二</el-tag>
                  <el-tag type="warning" v-else>标签三</el-tag>
                  </template>
              </el-table-column>
         </el-table>
     </el-card>
    </div>
</template>


<script>
export default {
    data(){
        return {
            RightsData:[]
        }
    },
    created(){
        this.getRightsData()
    },
    methods: {
       async getRightsData(){
         const {data:res}=await this.$http.get('rights/list') 
          this.RightsData=res.data
        }
    },
}
</script>


<style lang="less" scoped>
    
</style>